import React from 'react';
import { Meta, StoryObj } from '@storybook/react';
import FilePanel from './filePanel';

const meta: Meta<typeof FilePanel> = {
  title: 'Components/FilePanel',
  component: FilePanel,
  parameters: {
    layout: 'fullscreen',
  },
};

export default meta;

type Story = StoryObj<typeof FilePanel>;

// Mock data for the stories
const mockFiles = [
  {
    name: 'Documents',
    path: '/Documents',
    modifiedTime: new Date().toISOString(),
    isDirectory: true
  },
  {
    name: 'Pictures',
    path: '/Pictures',
    modifiedTime: new Date().toISOString(),
    isDirectory: true
  },
  {
    name: 'report.pdf',
    path: '/report.pdf',
    size: 1024 * 1024 * 2, // 2MB
    modifiedTime: new Date().toISOString(),
    isDirectory: false
  }
];

// Mock API responses
const mockApi = {
  get: async () => ({ data: mockFiles }),
  post: async () => ({ data: {} }),
  delete: async () => ({ data: {} }),
  put: async () => ({ data: {} })
};

export const Default: Story = {
  args: {
    currentPath: '/',
    files: mockFiles,
    searchQuery: '',
    clipboard: undefined
  },
  parameters: {
    mockData: [
      {
        url: '/api/files',
        method: 'GET',
        status: 200,
        response: mockFiles
      }
    ]
  }
};

export const WithSearch: Story = {
  args: {
    ...Default.args,
    searchQuery: 'doc'
  }
};

export const WithSelection: Story = {
  args: {
    ...Default.args,
    files: mockFiles.map(file => ({
      ...file,
      selected: file.name === 'Documents'
    }))
  }
};

export const EmptyDirectory: Story = {
  args: {
    ...Default.args,
    files: []
  },
  parameters: {
    mockData: [
      {
        url: '/api/files',
        method: 'GET',
        status: 200,
        response: []
      }
    ]
  }
};

export const ErrorState: Story = {
  args: {
    ...Default.args
  },
  parameters: {
    mockData: [
      {
        url: '/api/files',
        method: 'GET',
        status: 500,
        response: {
          error: 'Failed to load directory'
        }
      }
    ]
  }
};